<template>
  <div class="common-layout navigation-bar">
    <el-container>
      <el-aside width="200px" class="side-navigation">
        <el-row class="tac">
          <el-col :span="24">
            <el-menu
                text-color="#8c8b91"
                router
            >
              <el-menu-item
                  :index="item.path"
                  v-for="item in routerArray"
                  :key="item.path"
                  :class="route.path===item.path?'is-active floating-style':'floating-style'"
              >
                <el-icon><icon-menu /></el-icon>
                <span>{{item.name}}</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-container>
        <el-header>
          <el-button type="danger" @click="loginDialogVisible = true"><i class="iconfont icon-touxiang6"/> 登录</el-button>

        </el-header>
        <el-main>
          <router-view />
<!--          登录对话框-->
          <el-dialog
              v-model="loginDialogVisible"
              width="30%"
              align-center
          >
            <template #header="{ close, titleId, titleClass }">
              <div class="my-header">
                <h4 :id="titleId" :class="titleClass">登录后畅享高清视频</h4>
              </div>
            </template>
            <user-login />
          </el-dialog>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { useRouter,useRoute } from 'vue-router';
import { ref } from 'vue';
import UserLogin from "@/components/UserLogin.vue";
const route = useRoute()
const router = useRouter()
const routerArray=[
  {
    name:'首页',
    path:'/home',
  },
  {
    name:'推荐',
    path:'/',
  },
  {
    name:'我的',
    path:'/mine',
  },
]

// 登录
const loginDialogVisible = ref(false)
</script>

<style scoped lang="less">
@import "/src/common/iconfont/iconfont.css";
@mainColor:#161823;
@mainText:#8c8b91;
.navigation-bar{
  width: 100vw;
  background-color: @mainColor;
  .side-navigation{
    color: @mainText;
    .el-menu{
      height: 100vh;
      border-right: none;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      background-color: @mainColor;
      .floating-style{
        background-color: @mainColor;
      }
      .is-active{
        color: #fff;
      }
    }
  }
}
</style>
